<template>
  <div>
    <!-- <div>{{ formLists }}</div> -->
    <!-- <div>{{ formItemLists }}</div> -->
    <!-- <div style="text-align: left;padding-bottom: 8px;">
      <a-tooltip placement="top" title="新增表单字段">
        <a-button type="primary" icon="plus" @click="addFormItem" style="margin-right: 8px;" />
      </a-tooltip>
      <a-tooltip placement="top" title="表单预览">
        <a-button type="primary" icon="file" @click="previewForm" />
      </a-tooltip>
    </div> -->
    <a-row>
      <a-col :span="8">
        <a-table
          size="small"
          bordered
          :columns="columns"
          :data-source="formItemLists"
          :pagination="false"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
        >
          <template slot="type" slot-scope="text, record, index">
            <a-select
              v-model="text"
              size="small"
              style="width: 100%;"
              :options="typeLists"
              @change="cellDataHandle(text, record, 'type', index)"
            ></a-select>
          </template>
          <!-- <template slot="formItemLabel" slot-scope="text, record, index">
            <a-input
              v-model="text"
              size="small"
              @change="cellDataHandle(text, record, 'formItemLabel', index)"
            />
          </template>
          <template slot="field" slot-scope="text, record, index">
            <a-input
              v-model="text"
              size="small"
              @change="cellDataHandle(text, record, 'field', index)"
            />
          </template> -->
          <!-- <template slot="operateBtn" slot-scope="text, record, index">
            <div></div>
          </template> -->
        </a-table>
      </a-col>
      <a-col
        v-if="settingShow"
        :span="10"
        style="max-height:360px;overflow:auto;"
      >
        <PropertySetting
          :settingOptions="settingOptions"
          @settingChange="settingChange"
        ></PropertySetting>
      </a-col>
    </a-row>
    <!-- <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="fApiValue"></form-create>
          <div>
          测试表单
          <a-button type="primary" @click="createFormHandle">生成表单</a-button>
        </div>
    </div> -->
    <PreviewFormDialog
      :openDialog.sync="isPreviewForm"
      :config="previewConfig"
    ></PreviewFormDialog>
  </div>
</template>

<script>
// import api from '@/api/API';
import { getRoleId } from "@/unit/tool";
import PreviewFormDialog from "./components/previewFormDialog";
import PropertySetting from "./components/propertySetting";

const columns = [
  {
    title: "表单类型",
    align: "center",
    dataIndex: "type",
    width: "180px",
    scopedSlots: { customRender: "type" }
  },
  // {
  //   title: "操作",
  //   align: "center",
  //   dataIndex: "operateBtn",
  //   width: "auto",
  //   scopedSlots: { customRender: "operateBtn" }
  // }
];

// const formItemLists = [
//   {
//     rowId: 0,
//     type: 'input',
//     field: '',
//     formItemLabel: '',
//   },
// ];

const typeLists = [
  // {
  //   label: "单行输入框",
  //   value: "input"
  // },
  {
    label: "输入框",
    value: "textarea"
  },
  // {
  //   label: "下拉框",
  //   value: "select"
  // },
  {
    label: "单选框",
    value: "radio"
  },
  {
    label: "图片上传",
    value: "upload"
  }
];

export default {
  name: "assembleTemplateNew",
  components: {
    PreviewFormDialog,
    PropertySetting
  },
  model: {
    prop: "formLists",
    event: "getFormLists"
  },
  props: {
    formLists: Array
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      isPreviewForm: false,
      settingShow: false,
      settingOptions: [],
      previewConfig: {
        rule: [],
        option: {}
      },
      columns: columns,
      // formItemLists: formItemLists,
      formItemLists: [],
      typeLists: typeLists,
      defaultFormItem: {
        // rowId: 0,
        type: ""
        // field: "",
        // formItemLabel: ""
      }
    };
  },
  computed: {},
  watch: {
    formItemLists: {
      immediate: false,
      deep: true,
      handler: function(newVal, oldVal) {
        if (newVal == this.formLists) return;
        // this.previewConfig.rule = [...newVal];
        this.$emit("getFormLists", [...newVal]);
      }
    },
    formLists: {
      immediate: true,
      deep: true,
      handler: function(val) {
        this.formItemLists = val;
        let valKeys = Object.keys(val[0] || {});
        if (!valKeys.length) {
          this.formItemLists = [{ ...this.defaultFormItem }];
        }
        if (
          valKeys.length &&
          (val[0].type == "select" || val[0].type == "radio") &&
          val[0].options
        ) {
          this.settingShow = true;
          this.settingOptions = val[0].options;
        } else {
          this.settingShow = false;
          this.settingOptions = [
            {
              value: "1",
              label: "通过"
            },
            {
              value: "0",
              label: "不通过"
            }
          ];
        }
      }
    }
  },
  methods: {
    settingChange(options) {
      this.formItemLists[0].options = options;
    },
    previewForm() {
      this.isPreviewForm = true;
    },
    // addFormItem() {
    //   let lastRowId = this.formItemLists.find((item, index) => index == this.formItemLists.length - 1).rowId;
    //   let { rowId, ...rest } = this.defaultFormItem;
    //   this.formItemLists.push({ rowId: lastRowId + 1, ...rest });
    // },
    addFormItem() {
      this.formItemLists = [...this.formItemLists, { ...this.defaultFormItem }];
    },
    cellDataHandle(newValue, record, objKey, index) {
      if (objKey == "type" && (newValue == "select" || newValue == "radio")) {
        this.formItemLists[0].options = [
            {
              value: "1",
              label: "通过"
            },
            {
              value: "0",
              label: "不通过"
            }
          ]
        this.settingShow = true;
      } else {
        delete this.formItemLists[0].options;
        this.settingShow = false;
      }
      let rowIndex = index;
      this.formItemLists.forEach((item, index) => {
        if (index == rowIndex) {
          item[objKey] = newValue;
        }
      });
    },
    createFormHandle() {
      this.rule = this.formItemLists.map(item => {
        let { formItemLabel, ...rest } = item;
        return {
          title: formItemLabel,
          ...rest
        };
      });
    }
  },
  mounted() {},
  created() {
    getRoleId(this);
    // this.defaultFormItem = { ...formItemLists[0] };
    // this.previewConfig.rule = this.formItemLists;
  }
};
</script>

<style scoped="scoped" lang="less"></style>
